<template>
  <div class="viperBox">
    <!--    会员专区-->
    <div class="vipZoneBox">
      <p class="top">会员专区</p>
      <div class="vipZoneMid">
        <div class="vipLog">
          <img src="/src/assets/Course_images/default_head@3x.png"
               :style="{width:'50px',height:'50px',borderRadius: '50%'}">
        </div>
        <div class="vieMidRight">
          <div class="vipUser">
            <p class="name">登录</p>
            <p class="vipTip">会员登录尊享10大特权</p>
            <div class="line"></div>
          </div>
          <div class="rightItem">
            <span>
              <img src="/src/assets/Course_images/teach_video_free.png" alt="">
            </span>
            <p>以下<i>720</i>个会员专区课程<br>全部免费学习</p>
          </div>
          <div class="rightItem">
            <span>
              <img src="/src/assets/Course_images/member_preferential.png" alt="">
            </span>
            <p>购买非会员专区课程<br>可获会员立减优惠</p>
          </div>
        </div>
      </div>
    </div>
    <!--    类型爱好选择-->
    <TypeList :path="path"/>
    <!--    排序方式-->
    <div class="sort">
      <div
        :style="{color:integration.isChecked?'#f93684':''}"
        :data-integratin="integration.name"
      ><span>{{ integration.label }}</span></div>
      <div
        :style="{color:sellCountSort.isChecked?'#f93684':''}"
        :data-sellCount="sellCountSort.name"
      ><span>{{ sellCountSort.isChecked ? sellCountSort.label : '销量' }}</span></div>
      <div
        :style="{color:viewCountSort.isChecked?'#f93684':''}"
        :data-viewCountSort="viewCountSort.name"
      ><span>{{ viewCountSort.isChecked ? viewCountSort.label : '浏览量' }}</span></div>
      <div
        :style="{color:showPriceSort.isChecked?'#f93684':''}"
        :data-sortType="showPriceSort.name"
        class="price"
      >
        <span>
          {{showPriceSort.label}}
          <el-icon><ArrowDown/></el-icon>
        </span>
        <ul class="show">
          <li v-for="item in priceSort" :key="item.name">{{item.label}}</li>
        </ul>
      </div>
      <div
        :style="{color:onsellTimeSort.isChecked?'#f93684':''}"
        :data-onsellTimeSort="onsellTimeSort.name"
      ><span>{{ onsellTimeSort.isChecked ? onsellTimeSort.label : '发布时间' }}</span></div>
    </div>
<!--    视频列表-->
    <VideoList :path="path" :sort="sort"/>
  </div>
</template>

<script lang="ts">
import {defineComponent} from 'vue';


export default defineComponent({
  name: 'Viper',
});
</script>
<script setup lang="ts">
//引入组件
import TypeList from '@/pages/Course/components/TypeList/index.vue';
import VideoList from '@/pages/Course/components/VideoList/index.vue';
//引入请求类型
import type {sortType} from '@/api/course/model/courseType';
//引入vue3插件
import {onMounted, ref, computed} from 'vue';
//引入icons图标
import {ArrowDown} from '@element-plus/icons-vue'

const path = 'vip_zone';
onMounted(() => {

});
const integration = ref({
  label: '综合排序',
  name: 'integrated',
  isChecked: true
});
const sellCountSort = ref({
  label: '销量由高到低',
  name: 'sellCountDesc',
  isChecked: false
});
const viewCountSort = ref({
  label: '浏览量由高到低',
  name: 'viewCountDesc',
  isChecked: false
});
const onsellTimeSort = ref({
  label: '发布时间由近及远',
  name: 'onsellTimeDesc',
  isChecked: false
});
const priceSort = ref([
  {
    label: '价格由高到低',
    name: 'priceDesc',
    isChecked: false
  },
  {
    label: '价格由低到高',
    name: 'priceAsc',
    isChecked: false,
  },
]);

const showPriceSort = computed(() => {
  const re = priceSort.value.filter((item: sortType) => {
    return item.isChecked === true;
  });
  if (re.length !== 0){
    return re
  }
  return {label:'价格',name:'',isChecked:false}
});
const sort = computed(()=>{
  if (integration.value.isChecked) return integration.value.name;
  if (sellCountSort.value.isChecked) return sellCountSort.value.name;
  if (viewCountSort.value.isChecked) return viewCountSort.value.name;
  if (onsellTimeSort.value.isChecked) return onsellTimeSort.value.name;
  return (showPriceSort.value as sortType).name
})


</script>

<style lang="scss" scoped>
.viperBox {
  margin: 10px auto;
  width: 1200px;
  //vip盒子
  .vipZoneBox {
    width: 100%;
    height: 104px;
    background-color: white;
    display: flex;
    flex-direction: column;
    padding: 20px 30px 16px;
    margin: 15px 0 10px;

    .top {
      font-size: 16px;
      margin-bottom: 20px;
    }

    .vipZoneMid {
      //background-color: pink;
      flex: 1;
      display: flex;
      align-items: center;
      height: 69px;

      .vipLog {
        width: 50px;
        height: 50px;
        margin-right: 10px;
      }

      .vieMidRight {
        flex: 1;
        display: flex;

        .vipUser {
          position: relative;
          min-width: 220px;
          cursor: pointer;

          .name {
            font-size: 16px;
            padding-top: 4px;
            margin-bottom: 0;
          }

          .vipTip {
            margin-top: 8px;
            margin-bottom: 0;
            font-size: 12px;
            color: #f93684;
          }

          .line {
            position: absolute;
            height: 40px;
            width: 1px;
            background-color: #dee2e6;
            top: 12%;
            right: 0;
          }
        }

        .rightItem {
          flex: 1;
          text-align: center;
          cursor: pointer;

          span {
            width: 58px;
            height: 58px;
            display: inline-block;
            background-size: 100%;
            vertical-align: middle;
            margin-right: 30px;

            img {
              width: 58px;
              height: 58px;
            }
          }

          p {
            display: inline-block;
            vertical-align: middle;
            font-size: 16px;

            i {
              color: #f93684;
              font-style: normal;
              //cursor: pointer;
            }
          }
        }
      }
    }
  }

  //排序方式
  .sort {
    margin-top: 10px;
    width: 100%;
    background-color: #fff;
    display: flex;
    padding: 25px 30px;
    border-radius: 4px;
    margin-bottom: 10px;
    color: #7d8090;
    div{
      font-size: 16px;
      cursor: pointer;
      &+div{
        margin-left: 60px;
      }
      &:hover{
        span{
          color: #f93684;
        }
      }
    }
    .price{
      position: relative;
      &:hover{
        .show{
          display: flex;
        }
      }
      .show{
        position: absolute;
        top: -28px;
        left: -21px;
        background-color: #fff;
        border: 1px solid pink;
        border-radius: 5px;
        width: 120px;
        height: 80px;
        display: none;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        li{
          cursor: pointer;
          &:hover{
            color: #f93684;
          }
        }
      }
    }


  }
}
</style>
